import React from 'react';
import Container from '../components/Base/Container';
import { WhiteSpace, WingBlank, SearchBar, Modal, Icon } from 'antd-mobile'
import styles from './Association.less';
import styles2 from '../components/Base/HistorySearch.less';
import {connect} from 'dva';
import { routerRedux } from 'dva/router';

class AssociationResult extends React.Component{

  state={
    modelVisible:false,
    cls:'',
    focus:false,
  }

  submit=(value, name)=>{
    this.props.dispatch(routerRedux.replace({
      pathname: '/associationResult',
      query: {
        id: value,
      },
    }))
    let storage=localStorage.getItem('association')||'';
    let str=`&${name}=${value}`
    storage=storage.replace(str,'');
    storage+=str;
    localStorage.setItem('association', storage);
  }

  submitFirst=(val)=>{
    let {recommend}=this.props.association;
    if(recommend.length&&recommend[0]){
      this.submit(recommend[0]._id, recommend[0].cls2);
    }
  }

  change=(value)=>{
    this.props.dispatch({type:'association/fetchRecommend', payload:{key:value}});
  }

  onClose=()=>{
    this.setState({
      modelVisible:false,
    })
  }

  click=(cls)=>{
    this.setState({
      modelVisible:true,
      cls,
    })
  }

  formatRate=(rate)=>{
    if(rate>0.2){
      return <span style={{color:'rgb(0,175,206)'}}>高</span>
    }
    else if(rate>0.05){
      return <span style={{color:'rgb(238,198,14)'}}>中</span>
    }
    return <span style={{color:'red'}}>低</span>
  }

  render(){
    let {associationResult, recommend}=this.props.association;
    return(
      <Container title="连带销售">

        <Modal
          transparent
          maskClosable={true}
          visible={this.state.modelVisible}
          onClose={this.onClose}
          closable
        >
          <div className={styles.modalHead}>
            {this.state.cls.cls2}
          </div>
          <div className={styles.modalTitle}>
            育儿知识
          </div>
          <div className={styles.parentingKnowledge}>
            {this.state.cls.parentingKnowledge}
          </div>
        </Modal>

        <div className={styles.bgWhite}>
          <WingBlank size="sm">
            <SearchBar
              placeholder="搜索商品"
              onSubmit={this.submitFirst}
              onChange={this.change}
              onFocus={()=>{this.setState({focus:true})}}
              onBlur={()=>{setTimeout(()=>{this.setState({focus:false})},50)}}
            />
          </WingBlank>

          {
            this.state.focus&&
            <div className={styles.recommend}>
              {
                recommend&&recommend.map((item,index)=>{
                  return (
                    <div key={index} className={styles2.historyItem} onClick={this.submit.bind(this,item._id,item.cls2)}>
                      <Icon type={require('../svg/search.svg')} className={styles2.icon1} />
                      <div className={styles2.name}>
                        {item.cls2}
                      </div>
                      <Icon type={require('../svg/leftTop.svg')} className={styles2.icon2} />
                    </div>
                  )
                })
              }
            </div>
          }

          {
            !this.state.focus&&
            <div>
              <WhiteSpace size="xs"/>

              <div className={styles.people}>近1年内共有<span className={styles.red}>{associationResult.sale_qnty}</span>位客户购买过本产品</div>

              <WingBlank>

                <WhiteSpace size="lg" />

                <div className={styles.name}>{associationResult.cls2}</div>

                <WhiteSpace size="lg" />
                <div className={styles.titlt}>育儿知识</div>
                <WhiteSpace size="sm" />
                <div className={styles.knowledge}>{associationResult.parentingKnowledge}</div>
              </WingBlank>
              <WhiteSpace size="lg" className={styles.whiteSpace} />
              <WingBlank>
                <div>
                  <div className={styles.result}>
                    <div className={styles.cls}>连带商品</div>
                  </div>
                  {
                    associationResult.relations&&associationResult.relations.map((item,index)=>{
                      return(
                        <div key={index} className={styles.result}>
                          <div className={styles.name} >
                            {item.cls2}
                          </div>
                          <div style={{flex:1}}>
                        <span className={styles.name2} onClick={this.click.bind(this, item)}>
                          育儿知识
                        </span>
                          </div>
                          <div className={styles.num} onClick={this.submit.bind(this,item._id,item.cls2)} >连带指数：{this.formatRate(item.rate) }<Icon type={require('../svg/right.svg')} className={styles.icon}></Icon></div>
                        </div>
                      )
                    })
                  }
                </div>
              </WingBlank>
            </div>
          }

        </div>
      </Container>

    )
  }
}

export default connect(({association})=>({association}))(AssociationResult)
